<template>
    <el-form :model="form" label-width="120px" style="margin-top: 30px;" ref="formRef" :rules="rules">
        <el-row type="flex" justify="center">
            <el-col :span="9" :xs="24">
                <el-form-item label="账号名" prop="username">
                    <el-input v-model="form.username" placeholder="账号名" :disabled="routeType === 'info'" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center" v-if="!userId">
            <el-col :span="9" :xs="24">
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" type="password" show-password placeholder="密码"
                        :disabled="routeType === 'info'" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-col :span="9" :xs="24">
                <el-form-item label="姓名" prop="realname">
                    <el-input v-model="form.realname" placeholder="姓名" :disabled="routeType === 'info'" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-col :span="9" :xs="24">
                <el-form-item label="角色权限" prod="role_id">
                    <el-select v-model="form.role_id" style="width: 100%;" multiple :disabled="routeType === 'info'">
                        <el-option v-for="item in roleData" :label="item.name" :value="item.id" :key="item.id">
                        </el-option>
                    </el-select>

                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-col :span="9" :xs="24">
                <el-form-item label="邮箱绑定" prop="email">
                    <el-input v-model="form.email" placeholder="邮箱绑定" :disabled="routeType === 'info'" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-col :span="9" :xs="24">
                <el-form-item>
                    <el-button v-if="routeType !== 'info'" type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="goBack" :disabled="false">返回</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
  
<script lang="ts" setup>
import { reactive, ref, onMounted, watchEffect } from 'vue'
import { FormRules, ElMessage } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { userInsert, userUpdate, userInfo } from '@/api/system/user';
import { roleList } from '@/api/system/role';
import { useValidator } from '@/hooks/web/useValidator';
import { useCommonRequest } from '@/hooks/web/useCommonRequest';

let { roleData, getRoleData } = useCommonRequest()
getRoleData()
const { phoneValid, required, emailValid } = useValidator()
const router = useRouter()
const route = useRoute()
interface ruleForm {
    username: string,
    password: string,
    phone: string,
    realname: string,
}
let validatePhone = (rule: any, value: any, callback: any) => {
    phoneValid(value, callback)
}

let validateEmail = (rule: any, value: any, callback: any) => {
    emailValid(value, callback)
}
const rules = reactive<FormRules<ruleForm>>({
    username: [required('请输入账号')],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
    email: [{ required: false, validator: validateEmail, trigger: 'blur' }],
    realname: [required('请输入真实姓名')],
})

let form = reactive({
    username: '',
    password: '',
    phone: '',
    realname: '',
    role_id: '',
    email: '',

})

let formRef = ref(null)
let userId = ref(null)
let routeType = ref(null)

const onSubmit = () => {
    formRef.value.validate(async valid => {
        if (valid) {
            let res = ''
            if (userId.value) {
                form.id = userId.value
                res = await userUpdate(form)
            } else {
                res = await userInsert(form)
            }
            if (res) {
                ElMessage({ message: '操作成功', type: 'success' })
                goBack()
            }
        } else {
            return
        }
    })
    console.log('submit!')
}

let ruleOptions = ref(null)
const getRoles = async () => {
    let result = await roleList();

    ruleOptions.value = result.data.list
}

const goBack = () => {
    router.push('/system/user')
}

const getUser = async () => {
    let result = await userInfo({ id: userId.value });
    if (result) {
        form = Object.assign(form, result.data)
    }
}

onMounted(() => {
    // getRoles()
    if (route.query.userId) {
        routeType.value = route.query.type
        userId.value = route.query.userId
        getUser()
        console.log(userId)
    }
})

</script>